<script setup lang="ts">
import { noPost } from "@/api/student/my/my";
import { onMounted, reactive } from "vue";
import router from "@/router";

const list: any = reactive([[]]);
onMounted(() => {
  noPost().then((res) => {
    list.length = 0;
    if (res.data.msg == "请求成功") {
      console.log(res);

      list.push(res.data.data);
    }
  });
});

// 去学习
const goStudy = () => {};
//去支付
const goPaid = (code: any) => {
  console.log(code);

  router.push({
    path: "/resultOrder",
    query: {
      code: code,
    },
  });
};
</script>

<template>
  <template v-if="list[0].length == 0">
    <el-empty description="暂无订单" />
  </template>
  <template v-else>
    <el-table :data="list[0]" style="width: 100%">
      <!-- 订单详情 -->
      <el-table-column fixed label="订单详情" width="350" #default="scope">
        <div class="detail">
          <div>订单号:{{ scope.row.code }}</div>
          <div>
            <div class="left">
              <el-image
                style="width: 100px; height: 100px"
                :src="scope.row.imgUri"
                fit="contain"
              />
            </div>
            <div class="right">
              <div>
                <div>{{ scope.row.className }}</div>
                <div>{{ scope.row.orderTime }}</div>
              </div>
            </div>
          </div>
        </div>
      </el-table-column>

      <!-- 价格 -->
      <el-table-column prop="price" label="价格" width="120" />

      <!-- 支付状态 -->
      <el-table-column label="支付状态" width="120" #default="scope">
        <template v-if="scope.row.status == 1"> 已支付 </template>
        <template v-else-if="scope.row.status == 0"> 未支付 </template>
        <!-- <template v-if="scope.rwo.status == -1"> 已取消 </template> -->
      </el-table-column>

      <!-- 操作 -->
      <el-table-column fixed="right" label="操作" width="120" #default="scope">
        <template v-if="scope.row.status == 1">
          <el-button link type="primary" size="small" @click="goStudy"
            >去学习</el-button
          >
        </template>
        <template v-else-if="scope.row.status == 0">
          <el-button
            link
            type="primary"
            size="small"
            @click="goPaid(scope.row.code)"
            >去支付</el-button
          >
        </template>
        <!-- <template v-if="scope.row.status == -1">
                  <el-button
                    link
                    type="primary"
                    size="small"
                    @click="handleClick"
                    >已取消</el-button
                  > -->
        <!-- </template> -->
      </el-table-column>
    </el-table>
  </template>
</template>

<style scoped></style>
